<template>
	<div id="picklist" class="picklist">
		<cell class="pickListCell" :title="cellTitle" :value="showSelectedItems" @click.native="onClick" is-link></cell>

		<div v-transfer-dom>
			<popup v-model="show" height="100%">
				<div id="headerSimple" class="headerSimple">
					<x-header :left-options="{showBack: false}">
						<x-icon slot="overwrite-left" type="ios-arrow-back" size="16" class="backIcon" @click="goBack"></x-icon>
						<span slot="overwrite-left" style="color: white; font-weight: bold; font-size: 16px">{{listTitle}}</span>
						<!--<img slot="right" width="16" style="display:block;margin-right:10px;" src="@/assets/svg/icon_submit_white.svg" @click="completeListSelect">-->
						<span slot="right" style="color: white; background: #ff6767; padding: 2px 6px; font-size: 14px; border-radius: 5px;" @click="completeListSelect">确定</span>
					</x-header>
				</div>
				<div class="pickListPopup">
					<!--<x-button class="pickListBtn" mini :gradients="['#FF2719', '#FF61AD']" @click.native="completeListSelect">确定</x-button>-->
					<group>
						<checklist class="pickCheckList" v-if="max == '1'" :max="1" ref="checkList" title="已选" :options="selectedObjectList" v-model="objectListValue" @on-change="change"></checklist>
						<checklist class="pickCheckList" v-else ref="checkList" title="已选" :options="selectedObjectList" v-model="objectListValue" @on-change="change"></checklist>
					</group>
					<group>
						<Search @on-submit="onSubmit" :auto-fixed="false" v-model="value" @on-focus="onFocus" @on-cancel="onCancel"></Search>
						<checklist class="pickCheckList" v-if="max == '1'" :max="1" ref="checkList" :title="listTitle" :options="objectList" v-model="objectListValue" @on-change="change"></checklist>
						<checklist class="pickCheckList" v-else ref="checkList" :title="listTitle" :options="objectList" v-model="objectListValue" @on-change="change"></checklist>
					</group>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {XHeader, Search, Group, Checklist, TransferDom, Popup, Cell, XButton, Checker, CheckerItem} from 'vux'
	export default {
		name: "picklist",
		directives: {
			TransferDom
		},
		components:{
			XHeader,
			Search,
			Group,
			Checklist,
			TransferDom,
			Popup,
			Cell,
			XButton,
			Checker,
			CheckerItem
		},
		props: ['url','cellTitle', 'listTitle', 'max'], //接收父亲组件传来的参数
		data() {
			return {
				show: false,
				showSelectedItems: '',
				objectList: [],
				allObjectList: [],
				objectListValue: [],
				fullValues: [],
				items: [],
				autoFixed: false,
				value: '',
				selectedObjectList: [],
			}
		},
		watch: {
			fullValues: function () {
				//Clear old data
				this.showSelectedItems = ''

				if(this.allObjectList.length > 0){
					//Fix the checklist limitation once we are searching the target and select, the corresponding name will be missing
					let j
					for(j in this.fullValues){
						let i
						for (i in this.allObjectList) {
							if (this.allObjectList[i].key == this.fullValues[j].value) {
								this.objectList.push(this.allObjectList[i])
								this.showSelectedItems = this.showSelectedItems + this.allObjectList[i].value + ','
							}
						}
					}
				}else{
					//To here means, we are updating the record and using the data from server end
					let i
					for(i in this.fullValues){
						this.showSelectedItems = this.showSelectedItems + this.fullValues[i].label + ','
						this.objectListValue.push(this.fullValues[i].value)
						this.allObjectList.push({key: this.fullValues[i].value, value: this.fullValues[i].label})
					}
				}

				this.showSelectedItems = this.showSelectedItems.substr(0, this.showSelectedItems.length -1)
			}
		},
		methods: {
			goBack: function () {
				this.$router.go(-1)
			},
			//Get the user list pop up
			onClick: function () {
				bus.$emit("barController", 9)
				let _this = this
				NetWorking.doGet(
					this.url,
					null,
					null,
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.allObjectList = rs.pop_list
							_this.objectList = _this.allObjectList
						}else{
							alert(rs.error_message)
						}
					}
				)
				this.show = true
			},
			completeListSelect: function () {
				bus.$emit("barController", 1)
				bus.$emit("setTopSimpleTitle", this.listTitle)
				this.fullValues = this.$refs.checkList.getFullValue()
				this.show = false
			},
			change (val, label) {
				this.selectedObjectList = []
				for(let i=0; i<val.length; i++){
					for(let j=0; j<this.allObjectList.length; j++){
						if(this.allObjectList[j].key == val[i]){
							this.selectedObjectList.push({key: this.allObjectList[j].key, value: this.allObjectList[j].value})
						}
					}

				}
			},
			onSubmit (val) {
				this.objectList = []
				var i
				for (i in this.allObjectList) {
					if (this.allObjectList[i].value.indexOf(val) > -1) {
						this.objectList.push(this.allObjectList[i])
					}
				}
			},
			onCancel () {
				console.log('on cancel')
			},
			onFocus () {
				console.log('on focus')
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: 'customerDetails', params: { id: id }})
			}
		}
	}
</script>

<style lang="less">
	@import '~vux/src/styles/close.less';

	.pickCheckList > .weui-cells > .weui-cell > .weui-cell__bd {
		text-align: left !important;
	}

	.pickCheckList > .weui-cells__title {
		margin-top: 0.77em !important;
		margin-bottom: 0.77em !important;
		font-weight: bold !important;
	}

	.pickCheckList > .weui-cells > .weui-cell {
		padding: 0px 15px !important;
	}

	.picklist{
		font-size: 14px !important;
	}

	.pickListBtn{
		float: right;
		margin: 5px !important;
	}

	.pickListCell {
		padding: 0px 15px !important;
		border-bottom: solid 1px;
		border-bottom-color: #ececec;
	}

	.button-group {
		border-radius: 25px;
	}

	.pickListPopup {
		margin-top: 56px;
		width:100%;
		height:100%;
	}

	.buttonPickList {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
		width: 90% !important;

	}

	.vux-datetime{
		text-decoration:none
	}

	.demo4-item {
		background-color: #ddd;
		color: #222;
		font-size: 14px;
		padding: 5px 10px;
		margin-right: 10px;
		line-height: 18px;
		border-radius: 15px;
	}
	.demo4-item-selected {
		background-color: #FF3B3B;
		color: #fff;
	}
	.demo4-item-disabled {
		color: #999;
	}

	.headerSimple > .vux-header > .vux-header-title {
		text-align: left;
		padding-left: 45px;
	}

	.vux-header {
		background-color: #44abe2 !important;
	}

	.headerSimple {
		width: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		z-index: 9999;
	}

	.backIcon {
		fill: #fff;
		position: relative;
		margin-right: 15px;
		top: 2px !important;
		left: 5px !important;
	}
</style>
